import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15

/**
 * 电表卡片组件
 * 显示单块电表的实时数据
 */
Rectangle {
    id: root

    // 公开属性
    property int meterId: 0
    property string meterName: "电表"
    property string location: "未知位置"
    property bool online: false
    property real ua: 0.0
    property real ub: 0.0
    property real uc: 0.0
    property real ia: 0.0
    property real ib: 0.0
    property real ic: 0.0
    property real averageVoltage: 0.0
    property real averageCurrent: 0.0
    property real totalPower: 0.0

    // 信号
    signal clicked()

    // 外观属性
    implicitWidth: 280
    implicitHeight: 190
    radius: 8
    color: "white"

    // 边框
    border.width: online ? 2 : 1
    border.color: online ? "#27ae60" : "#bdc3c7"

    // 阴影效果
    layer.enabled: true
    layer.effect: DropShadow {
        horizontalOffset: 0
        verticalOffset: 2
        radius: 8
        samples: 16
        color: "#40000000"
    }

    // 鼠标悬停效果
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor

        onEntered: {
            root.scale = 1.02
        }

        onExited: {
            root.scale = 1.0
        }

        onClicked: {
            // 发送点击信号
            root.clicked()
        }
    }

    // 缩放动画
    Behavior on scale {
        NumberAnimation {
            duration: 200
            easing.type: Easing.OutCubic
        }
    }

    // 主布局
    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 12
        spacing: 8

        // 标题栏
        RowLayout {
            Layout.fillWidth: true
            Layout.preferredHeight: 28
            spacing: 8

            // 状态指示灯
            Rectangle {
                width: 12
                height: 12
                radius: 6
                color: root.online ? "#27ae60" : "#e74c3c"

                // 在线时的闪烁动画
                SequentialAnimation on opacity {
                    running: root.online
                    loops: Animation.Infinite
                    NumberAnimation { to: 0.3; duration: 1000 }
                    NumberAnimation { to: 1.0; duration: 1000 }
                }
            }

            // 电表名称
            Text {
                text: root.meterName
                font.pixelSize: 15
                font.bold: true
                color: "#2c3e50"
                Layout.fillWidth: true
                elide: Text.ElideRight
            }

            // 电表ID
            Rectangle {
                width: 38
                height: 22
                radius: 3
                color: "#3498db"

                Text {
                    anchors.centerIn: parent
                    text: "#" + root.meterId
                    font.pixelSize: 11
                    font.bold: true
                    color: "white"
                }
            }
        }

        // 位置信息
        Text {
            text: "📍 " + root.location
            font.pixelSize: 11
            color: "#7f8c8d"
            Layout.fillWidth: true
            Layout.preferredHeight: 16
            elide: Text.ElideRight
        }

        // 分隔线
        Rectangle {
            Layout.fillWidth: true
            height: 1
            color: "#ecf0f1"
        }

        // 数据显示区域
        GridLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            columns: 2
            rowSpacing: 6
            columnSpacing: 8

            // 平均电压
            ColumnLayout {
                Layout.fillWidth: true
                spacing: 3

                Text {
                    text: "⚡ 平均电压"
                    font.pixelSize: 10
                    color: "#7f8c8d"
                }

                RowLayout {
                    spacing: 3
                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter

                    Text {
                        text: root.averageVoltage.toFixed(1)
                        font.pixelSize: 15
                        font.bold: true
                        color: getVoltageColor(root.averageVoltage)
                    }

                    Text {
                        text: "V"
                        font.pixelSize: 10
                        color: "#95a5a6"
                        Layout.alignment: Qt.AlignVCenter
                    }
                }
            }

            // 平均电流
            ColumnLayout {
                Layout.fillWidth: true
                spacing: 3

                Text {
                    text: "⚙ 平均电流"
                    font.pixelSize: 10
                    color: "#7f8c8d"
                }

                RowLayout {
                    spacing: 3
                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter

                    Text {
                        text: root.averageCurrent.toFixed(2)
                        font.pixelSize: 15
                        font.bold: true
                        color: getCurrentColor(root.averageCurrent)
                    }

                    Text {
                        text: "A"
                        font.pixelSize: 10
                        color: "#95a5a6"
                        Layout.alignment: Qt.AlignVCenter
                    }
                }
            }

            // 总功率
            ColumnLayout {
                Layout.fillWidth: true
                Layout.columnSpan: 2
                spacing: 3

                Text {
                    text: "🔋 总功率"
                    font.pixelSize: 10
                    color: "#7f8c8d"
                }

                RowLayout {
                    spacing: 3
                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter

                    Text {
                        text: (root.totalPower / 1000).toFixed(2)
                        font.pixelSize: 17
                        font.bold: true
                        color: "#3498db"
                    }

                    Text {
                        text: "kW"
                        font.pixelSize: 10
                        color: "#95a5a6"
                        Layout.alignment: Qt.AlignVCenter
                    }
                }
            }
        }

        // 离线提示
        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 26
            radius: 4
            color: "#e74c3c"
            visible: !root.online

            Text {
                anchors.centerIn: parent
                text: "⚠ 设备离线"
                font.pixelSize: 11
                font.bold: true
                color: "white"
            }
        }
    }

    // 根据电压值返回颜色
    function getVoltageColor(voltage) {
        if (voltage < 200 || voltage > 250) {
            return "#e74c3c" // 红色：异常
        } else if (voltage < 210 || voltage > 240) {
            return "#f39c12" // 橙色：警告
        } else {
            return "#27ae60" // 绿色：正常
        }
    }

    // 根据电流值返回颜色
    function getCurrentColor(current) {
        if (current > 100) {
            return "#e74c3c" // 红色：过流
        } else if (current > 80) {
            return "#f39c12" // 橙色：警告
        } else {
            return "#27ae60" // 绿色：正常
        }
    }

    // 数据项组件
    Component {
        id: dataItemComponent
        
        ColumnLayout {
            property string label: ""
            property string value: "0"
            property string unit: ""
            property string icon: ""
            property color valueColor: "#2c3e50"
            property bool highlighted: false

            spacing: 4

            Text {
                text: icon + " " + label
                font.pixelSize: 11
                color: "#7f8c8d"
            }

            RowLayout {
                spacing: 4

                Text {
                    text: value
                    font.pixelSize: highlighted ? 18 : 16
                    font.bold: highlighted
                    color: valueColor
                }

                Text {
                    text: unit
                    font.pixelSize: 11
                    color: "#95a5a6"
                }
            }
        }
    }
}

